<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
</head>

<body>
    <section id="wrap">
        <h2 class="title">百度音乐榜单</h2>
        <ul id="list">
            <li>
                <input type="checkbox" checked="false" />
                <span>第一条信息</span>
                <a href="javascript:;" class="collect">收藏</a>
                <a href="javascript:;" class="cancelCollect">取消收藏</a>
                <a href="javascript:;" class="remove">删除</a>
            </li>
        </ul>
        <footer class="footer">
            <label><input type="checkbox" id="checkAll" />全选/全不选</label>
            <a href="javascript:;" id="remove">删除</a>
            <input type="text" id="newInfo" />
            <a href="javascript:;" id="add">添加</a>
        </footer>
    </section>
    <script>
        var data = [
            {
                id: 0,
                title: "残酷月光 - 费启鸣",
                checked: true,
                collect: true
            }, {
                id: 1,
                title: "兄弟 - 艾热",
                checked: false,
                collect: false
            }, {
                id: 2,
                title: "毕生 - 夏增祥",
                checked: false,
                collect: true
            }, {
                id: 3,
                title: "公子向北去 - 李春花",
                checked: false,
                collect: false
            }, {
                id: 4,
                title: "战场 - 沙漠五子",
                checked: true,
                collect: false //是否收藏 true 收藏 false 没有收藏
            }
        ];



        // 初始化数据
        initData()
        function initData() {
            data.forEach((item, index) => {
                item.checked = false
                item.collect = false
            })
        }
        // 初次渲染数据
        render()
        function render() {
            let list = document.querySelector('#list')
            list.innerHTML = ''
            data.forEach((item, index) => {
                let lis = document.createElement('li')
                lis.innerHTML =
                    `
          <span>${item.title}</span>
          `

                // 创建input标签加入页面
                let input = document.createElement('input')
                input.type = 'checkbox'
                input.checked = item.checked
                // 绑定input点击事件
                input.onclick = function () {
                    // 每次点击input让对应的data的checked值和上次相反
                    data[index].checked = !data[index].checked
                    // 判断数据中的checked是否全为true，来决定checkAll是否全选
                    data.forEach(function (val) {
                        let res = data.every(function (val) {
                            return val.checked == true
                        })
                        if (res) {
                            checkAll.checked = res
                        } else {
                            checkAll.checked = false
                        }
                    })
                }
                lis.prepend(input)
                list.appendChild(lis)

                // 创建收藏标签加入页面
                let col = document.createElement('a')
                col.setAttribute('href', 'javascript:;')
                if (item.collect == true) {
                    col.setAttribute('class', 'collect')
                    col.innerHTML = '取消收藏&nbsp;&nbsp;'
                } else {
                    col.setAttribute('class', 'cancelCollect')
                    col.innerHTML = '收藏&nbsp;&nbsp;'
                }
                // 绑定点击收藏/取消收藏事件
                col.onclick = function () {
                    item.collect = !item.collect
                    render()
                }
                lis.appendChild(col)


                // 创建删除标签加入页面
                let del = document.createElement('a')
                del.setAttribute('href', 'javascript:;')
                del.setAttribute('class', 'remove')
                del.innerHTML = '删除'
                // 绑定删除事件
                del.onclick = function () {
                    data.splice(index, 1)
                    render()
                }
                lis.appendChild(del)
            })
        }

        // 添加按钮添加数据，重新渲染
        let newInfo = document.querySelector('#newInfo')
        let add = document.querySelector('#add')
        add.onclick = () => {
            if (data.length == 0) {
                // 判断数据如果为空，就初始化一个数据重新渲染
                if (newInfo.value != '') {
                    data = [{
                        id: 0,
                        title: `${newInfo.value}`,
                        checked: false,
                        collect: false
                    }]
                    checkAll.checked = false
                    render()
                }
            } else {
                if (newInfo.value != '') {
                    data.push({
                        id: data[data.length - 1].id + 1,
                        title: `${newInfo.value}`,
                        checked: false,
                        collect: false
                    })
                    render()
                }
            }
            newInfo.value = ''
        }
        // 全选 全不选
        let checkAll = document.querySelector('#checkAll')
        checkAll.onclick = () => {
            if (checkAll.checked) {
                data.forEach((item) => {
                    item.checked = true
                })
            } else {
                data.forEach((val) => {
                    val.checked = false
                })
            }
            render()
        }

        // 删除选中多个
        let remove = document.querySelector("#remove")
        remove.onclick = function () {
            del()
            render()
        }
        function del() {
            data.forEach(function (val, idx) {
                // 当checked属性为true，就应该删除
                if (val.checked == true) {
                    // 删除data数组内下表为idx的元素
                    data.splice(idx, 1)
                    // 当需要一次删除多个时，不能直接根据元素的索引直接删除
                    // 因为删除一个元素后，data数组里面元素的索引值会变化
                    // 所以再次调用del函数，每次删除一个元素后，重新遍历数组查找checked为true的元素
                    // 即使索引值变化了，也能重新获取索引值
                    del()
                }
            })
        }

    </script>
</body>

</html>